/*
orange: #EAAF00;
blue: #007093;
blue-medium: #80E0FF;
blue-light: #BFF0FF;
mustard: #EBCF00;
mustard-dark: #D1B902;
brown: #B85B37;
brown-medium: #FFBFA6;
brown-light: #FFDFD2;
brown-dark: #814027
grey: #EBEBEB;
black: #141414;
*/

body {
    margin: 0;
    font-family: sans-serif;
    background-color: #EBEBEB;
    color: #141414
}

#mainarea, #status {
    padding: 3px;
}
#status {
	height: 130px;
}

div.status .rbtop div { 
    background: url(/images/orangeTL.gif) no-repeat top left; 
}
div.status .rbtop { 
    background: #EAAF00 url(/images/orangeTR.gif) no-repeat top right; 
}

div.status .rbbot div { 
    background: url(/images/orangeBL.gif) no-repeat bottom left; 
}

div.status .rbbot { 
    background: #EAAF00 url(/images/orangeBR.gif) no-repeat bottom right; 
}

div.status .rbtop div, div.status .rbtop, div.status .rbbot div, div.status .rbbot {
    width: 100%;
    height: 10px;
    font-size: 1px;
}

div.status .rbcontent { 
    padding: 0 10px 10px 10px; 
    height: 100px;
    background-color: #EAAF00; 
}

div.status div.nowPlaying {
    width: 49%;
    float: left;    
    height: 100px;
}

div.status div.queue {
    width: 49%;
    height: 100px;
}

#navbar {
    height: 37px;
}

#navbar table {
    width: 100%;
    border-spacing: 2px;
}

#navbar td.leftSide {
    background-color: #EBCF00;
    background-image: url(/images/mustardLeft.gif);
    background-repeat: no-repeat;
    background-position: right;
}

#navbar td.rightSide {
    background-color: #EBCF00;
    background-image: url(/images/mustardRight.gif);
    background-repeat: no-repeat;
    background-position: left;
}

#navbar td.nav, td.navHover, td.navHome, td.navHomeHover, td.navSearch, td.navSearchHover {
    width: 30px;
    height: 30px;
    margin: 0;
    text-align: center;
    font-weight: bold;
    font-size: 16px;    
    spacing: 0px;
    padding: 0px;
    vertical-align: middle;
}

#navbar td.nav {
    background-image: url(/images/mustardFull.gif);
}

#navbar td.navHover {
    background-image: url(/images/mustardDarkFull.gif);
    color: white;
}

#navbar td.navHome {
    background-image: url(/images/homeCircle.gif);
}

#navbar td.navHomeHover {
    background-image: url(/images/homeCircleDark.gif);
}

#navbar td.navSearch {
    background-image: url(/images/searchCircle.gif);
}

#navbar td.navSearchHover {
    background-image: url(/images/searchCircleDark.gif);
}

div.artistList .rowEven, div.artistList .rowOdd {
    background-color: #BFF0FF;
    color: #141414;
}

div.artistList .rowHoverEven, div.artistList .rowHoverOdd  {
    background-color: #004F68;
    color: #EBEBEB;
}

div.artistList { 
    width: 32%; 
    float: left; 
}

div.artistList .rbtop div { 
    background: url(/images/blueTL.gif) no-repeat top left; 
}

div.artistList .rbtop { 
    background: #007093 url(/images/blueTR.gif) no-repeat top right; 
}

div.artistList .rbbot div { 
    background: url(/images/blueBL.gif) no-repeat bottom left; 
}

div.artistList .rbbot { 
    background: #007093 url(/images/blueBR.gif) no-repeat bottom right; 
}

div.artistList .rbtop div, div.artistList .rbtop, div.artistList .rbbot div, div.artistList .rbbot {
    width: 100%;
    height: 10px;
    font-size: 1px;
}

div.artistList .rbcontent { 
    padding: 0 10px;
    background-color: #007093;
}

div.artistList table {
    background-color: #80E0FF;
}

div.artistList .tableHeader {
    font-weight: bold;
    text-align: center;
    color: #BFF0FF;
}

div.albumSide {
    overflow:-moz-scrollbars-vertical;
    overflow-x:hidden;
    overflow-y:scroll;
    width: 67%;
    float: right;
}

div.album { 
    clear: both;
    width: 100%; 
    float: left; 
    margin-left: 2px; 
    margin-bottom: .5em;
}

div.album .rbtop div { 
    background: url(/images/brownTL.gif) no-repeat top left; 
}

div.album .rbtop { 
    background: #B85B37 url(/images/brownTR.gif) no-repeat top right; 
}

div.album .rbbot div { 
    background: url(/images/brownBL.gif) no-repeat bottom left; 
}

div.album .rbbot { 
    background: #B85B37 url(/images/brownBR.gif) no-repeat bottom right; 
}

div.album .rbtop div, div.album .rbtop, div.album .rbbot div, div.album .rbbot {
    width: 100%;
    height: 10px;
    font-size: 1px;
}

div.album .rbcontent { 
    padding: 0 10px;
    background: #B85B37;
}

div.album img {
    float: right;
    min-height: 2.5em;
}

div.album div.artistName{
    font-size: 2em;
    color: #FFDFD2;
}

div.album div.albumName{
    font-size: 1.5em;
    color: #FFDFD2;
}

div.trackList {
    width: 97%;
    margin-top: .5em;
    margin-left: auto;
    margin-right: auto;
}

div.trackList .trackNumber {
    text-align: right;
    width: 8%;
    padding-right: .5em;
}

div.trackList .trackName {
    width: 92%;
}
div.trackList .rbtop div, div.trackList .rbtop, div.trackList .rbbot div, div.trackList .rbbot {
    background: none;
    width: 100%;
    height: 0px;
    font-size: 1px;
}

div.trackList .rbcontent { 
    margin: 0 0 0 0;
}

div.trackList .rowEven, div.trackList .rowOdd {
    background-color: #FFDFD2;
}

div.trackList table {
    background-color: #FFBFA6;
}

div.trackList .rowHoverEven, div.trackList .rowHoverOdd, .otherTrackMessageHover, .requestAlbumHover {
    background-color: #814027;
    color: #EBEBEB;
}

.otherTrackMessage, .requestAlbum {
    text-align: center;
}

div.welcome { 
    width: 100%; 
    color: #BFF0FF;
}

div.welcome div.header {
    font-size: 1.5em;
    font-weight: bold;
    margin-left: 410px;
    margin-bottom: .5em;
}


div.welcome div.instructions {
    font-size: 1em;
    font-weight: bold;
    margin-left: 410px;
}

div.welcome img {
    float: left;
}

div.welcome .rbtop div { 
    background: url(/images/blueTL.gif) no-repeat top left; 
}

div.welcome .rbtop { 
    background: #007093 url(/images/blueTR.gif) no-repeat top right; 
}

div.welcome .rbbot div { 
    background: url(/images/blueBL.gif) no-repeat bottom left; 
}

div.welcome .rbbot { 
    background: #007093 url(/images/blueBR.gif) no-repeat bottom right; 
}

div.welcome .rbtop div, div.welcome .rbtop, div.welcome .rbbot div, div.welcome .rbbot {
    width: 100%;
    height: 10px;
    font-size: 1px;
}

div.welcome .rbcontent { 
    padding: 0 10px;
    background-color: #007093;
}

div.search { 
    width: 32%; 
    float: left; 
    color: #BFF0FF;
}

div.search .rbtop div { 
    background: url(/images/blueTL.gif) no-repeat top left; 
}

div.search .rbtop { 
    background: #007093 url(/images/blueTR.gif) no-repeat top right; 
}

div.search .rbbot div { 
    background: url(/images/blueBL.gif) no-repeat bottom left; 
}

div.search .rbbot { 
    background: #007093 url(/images/blueBR.gif) no-repeat bottom right; 
}

div.search .rbtop div, div.search .rbtop, div.search .rbbot div, div.search .rbbot {
    width: 100%;
    height: 10px;
    font-size: 1px;
}

div.search .rbcontent { 
    padding: 0 10px;
    background-color: #007093;
}

div.search table {
    background-color: #80E0FF;
}

div.search input {
	margin-bottom: 1em;
}

div.search .button {
	background-color: #BFF0FF;
}

div.search .header {
    font-weight: bold;
    text-align: center;
}

div.searchResults { 
    width: 67%; 
    float: right; 
}

div.searchResults .tableHeader {
    font-weight: bold;
    text-align: center;
    color: #141414;
    background-color: #FFBFA6;
}

div.searchResults .tableHeaderButton {
    font-weight: bold;
    text-align: center;
    color: #141414;
    background-color: #FFBFA6;
}

div.searchResults .rbtop div { 
    background: url(/images/brownTL.gif) no-repeat top left; 
}

div.searchResults .rbtop { 
    background: #B85B37 url(/images/brownTR.gif) no-repeat top right; 
}

div.searchResults .rbbot div { 
    background: url(/images/brownBL.gif) no-repeat bottom left; 
}

div.searchResults .rbbot { 
    background: #B85B37 url(/images/brownBR.gif) no-repeat bottom right; 
}

div.searchResults .rbtop div, div.searchResults .rbtop, div.searchResults .rbbot div, div.searchResults .rbbot {
    width: 100%;
    height: 10px;
    font-size: 1px;
}


div.searchResults .rbcontent { 
    padding: 0 10px;
    background: #B85B37;
}

div.searchResults .artistName {
    width: 33%;
}

div.searchResults .albumName{
    width: 33%;
}

div.searchResults .trackName{
    width: 33%;
}

div.searchResults .rowEven, div.searchResults .rowOdd {
    background-color: #FFDFD2;
}

div.searchResults table {
    background-color: #FFBFA6;
}

div.searchResults .rowHoverEven, div.searchResults .rowHoverOdd, 
	div.searchResults .tableHeaderButtonHover{
    background-color: #814027;
    color: #EBEBEB;
}

#modalContainer {
	background-color:transparent;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:10000;
	background-image:url(/images/tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
	position:relative;
	width:300px;
	min-height:100px;
	margin-top:50px;
	border:2px solid #000;
	background-color:#F2F5F6;
	background-image:url(/images/alert.png);
	background-repeat:no-repeat;
	background-position:20px 30px;
	visiblity:hidden;
}

#modalContainer > #alertBox {
	position:fixed;
}

#alertBox h1 {
	margin:0;
	font:bold 0.9em verdana,arial;
	background-color:#78919B;
	color:#FFF;
	border-bottom:1px solid #000;
	padding:2px 0 2px 5px;
}

#alertBox p {
	font:0.7em verdana,arial;
	height:50px;
	padding-left:5px;
	margin-left:55px;
}

#alertBox #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:3px;
	border:2px solid #000;
	width:70px;
	font:0.7em verdana,arial;
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	background-color:#78919B;
	text-decoration:none;
}

img.statusCover {
	max-width: 100px;
	max-height: 100px;
	width: expression(this.width > 100 ? 100: true);
	height: expression(this.height > 100 ? 100: true);
	float: left;
	margin-right: 2px;
}

img.browseCover {
	max-width: 150px;
	max-height: 150px;
	width: expression(this.width > 150 ? 150: true);
	height: expression(this.height > 150 ? 150: true);
	clear: right;
}

div.browseCover {
	width: 150px;
	height: expression(150);
	float: right;
}

#systemWorking {
	font-size: .8em;
	border: solid 1px black;
	background: #BBBBBB;
	float: right; 
}